<template>
  <view class="login-page">
    <!-- 顶部蓝色背景区域 -->
    <view class="top-section">
      <!-- 背景图片 -->
      <image class="bg-image" src="@/static/login-img/登录背景2.png" mode="cover"></image>
      
      
      <!-- 欢迎文字 -->
      <view class="welcome-text">
        <text class="greeting">您好,</text>
        <text class="welcome-message">欢迎登录车联网服务!</text>
      </view>
      
      <!-- 人物和车辆插图 -->
      <view class="illustration">
        <image class="character-image" src="@/static/login-img/登录背景1.png" mode="contain"></image>
      </view>
    </view>
    
    <!-- 底部白色登录表单区域 -->
    <view class="bottom-section">
      <view class="login-form">
        <!-- 手机号输入框 -->
        <view class="input-group">
    <!--      <text class="input-label">手机号登陆</text> -->
          <input 
            class="input-field" 
            type="number" 
            v-model="phoneNumber" 
            placeholder="请输入手机号"
            maxlength="11"
          />
        </view>
        
        <!-- 验证码输入框和获取按钮 -->
        <view class="input-group">
          <!-- <text class="input-label">输入验证码</text> -->
          <view class="code-input-container">
            <input 
              class="code-input" 
              type="number" 
              v-model="verificationCode" 
              placeholder="请输入验证码"
              maxlength="6"
            />
            <button 
              class="get-code-btn" 
              @click="getVerificationCode"
            >
              {{ codeButtonText }}
            </button>
          </view>
        </view>
        
        <!-- 登录按钮 -->
        <button 
          class="login-btn" 
          @click="handleLogin"
        >
          登录
        </button>
      </view>
    </view>
    
    <!-- 位置权限弹窗 -->
    <view class="location-modal" v-if="showLocationModal">
      <view class="modal-content">
        <view class="modal-title">获取你的位置信息</view>
        <view class="modal-desc">你的位置信息将用于获取你附近的站点</view>
        <view class="modal-buttons">
          <button class="reject-btn" @click="rejectLocation">拒绝</button>
          <button class="allow-btn" @click="allowLocation">允许</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      phoneNumber: '', // 手机号
      verificationCode: '', // 验证码
      codeButtonText: '获取验证码', // 获取验证码按钮文字
      countdown: 0, // 倒计时
      timer: null, // 定时器
      showLocationModal: false // 是否显示位置权限弹窗
    }
  },
  computed: {
    // 是否可以获取验证码
    canGetCode() {
      return this.phoneNumber.length === 11 && this.countdown === 0
    },
    // 是否可以登录
    canLogin() {
      return this.phoneNumber.length === 11 && this.verificationCode.length >= 4
    }
  },
  methods: {
    // 获取验证码
    getVerificationCode() {
      if (this.countdown > 0) return
      
      // 这里应该调用获取验证码的API
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      })
      
      // 开始倒计时
      this.startCountdown()
    },
    
    // 开始倒计时
    startCountdown() {
      this.countdown = 60
      this.codeButtonText = `${this.countdown}s后重发`
      
      this.timer = setInterval(() => {
        this.countdown--
        if (this.countdown > 0) {
          this.codeButtonText = `${this.countdown}s后重发`
        } else {
          this.codeButtonText = '获取验证码'
          clearInterval(this.timer)
          this.timer = null
        }
      }, 1000)
    },
				
				
    // 处理登录
    handleLogin() {
      // 这里应该调用登录API
      uni.showLoading({
        title: '登录中...'
      })
      
      // 模拟登录请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        
        // 登录成功后显示位置权限弹窗
        setTimeout(() => {
          this.showLocationModal = true
        }, 1500)
      }, 2000)
    },
    
    // 处理刷新
    handleRefresh() {
      uni.showToast({
        title: '页面已刷新',
        icon: 'success'
      })
    },
    
    // 拒绝位置权限
    rejectLocation() {
      this.showLocationModal = false
      uni.showToast({
        title: '已拒绝位置权限',
        icon: 'none'
      })
      
      // 跳转到首页
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }, 1000)
    },
    
    // 允许位置权限
    allowLocation() {
      this.showLocationModal = false
      
      // 获取位置信息
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          uni.showToast({
            title: '位置获取成功',
            icon: 'success'
          })  
          
          // 跳转到首页
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 1000)
        },
        fail: (err) => {
          uni.showToast({
            title: '位置获取失败',
            icon: 'none'
          })
          
          // 跳转到首页
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 1000)
        }
      })
    }
  },
  
  onUnload() {
    // 页面卸载时清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style scoped>
/* 页面整体样式 */
.login-page {
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* 顶部蓝色背景区域 */
.top-section {
  position: relative;
  height: 40vh;
  min-height: 300rpx;
  /* overflow: hidden; */
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}



.refresh-circle {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.refresh-symbol {
  font-size: 24rpx;
  color: #666;
  font-weight: bold;
}

/* 欢迎文字 */
.welcome-text {
  position: absolute;
  top: 120rpx;
  left: 80rpx;
  z-index: 2;
}

.greeting {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 16rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.welcome-message {
  display: block;
  font-size: 36rpx;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

/* 人物和车辆插图 */
.illustration {
  position: absolute;
  bottom: -55rpx;
  right: 40rpx;
  width: 400rpx;
  height: 400rpx;
  z-index: 99;
}

.character-image {
  width: 100%;
  height: 100%;
}

/* 底部白色登录表单区域 */
.bottom-section {
  position: relative;
  background-color: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  margin-top: -32rpx;
  z-index: 4;
  height: 60vh;
  padding: 0 80rpx;
}

.login-form {
  padding: 60rpx 60rpx 40rpx;
}

/* 输入框组 */
.input-group {
	margin-top: 40rpx;
  margin-bottom: 20rpx;
}

.input-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.input-field {
  width: 100%;
  height: 80rpx;
  border: none;
  border-bottom: 2rpx solid #e0e0e0;
  font-size: 32rpx;
  color: #333;
  background-color: transparent;
  padding: 0;
  transition: border-color 0.3s ease;
}

.input-field:focus {
  border-bottom-color: #007AFF;
}

/* 验证码输入容器 */
.code-input-container {
  border-bottom: 2rpx solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.code-input {
  flex: 1;
  height: 80rpx;
  margin-top: 20rpx;
  border: none;
  font-size: 32rpx;
  color: #333;
  background-color: transparent;
  padding: 0;
  transition: border-color 0.3s ease;
}

.code-input:focus {
  border-bottom-color: #007AFF;
}

.get-code-btn {
  width: 180rpx;
  height: 60rpx;
  background-color: #007AFF;
  color: #ffffff;
  border: none;
  position: relative;
  bottom: 10rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  /* 新增：弹性布局，让文字垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
  color: #ffffff;
  border: none;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 600;
  margin-top: 60rpx;
  transition: all 0.3s ease;
  /* 新增：弹性布局，让文字垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-btn:active {
  transform: scale(0.98);
}

/* 位置权限弹窗 */
.location-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-content {
  width: 100%;
  background-color: #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 40rpx 40rpx 60rpx;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 20rpx;
}

.modal-desc {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin-bottom: 60rpx;
  line-height: 1.5;
}

.modal-buttons {
  display: flex;
  gap: 20rpx;
}

.reject-btn {
  flex: 1;
  height: 80rpx;
  background-color: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.allow-btn {
  flex: 1;
  height: 80rpx;
  background-color: #007AFF;
  color: #ffffff;
  border: none;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 响应式适配 */
@media (max-width: 375px) {
  .top-section {
    height: 35vh;
    min-height: 250rpx;
  }
  
  .greeting {
    font-size: 42rpx;
  }
  
  .welcome-message {
    font-size: 32rpx;
  }
  
  .illustration {
    width: 300rpx;
    height: 280rpx;
    right: 30rpx;
	z-index: 9;
  }
  
  .login-form {
    padding: 50rpx 30rpx 30rpx;
  }
  
  .input-field,
  .code-input {
    height: 70rpx;
    font-size: 30rpx;
  }
  
  .login-btn {
    height: 80rpx;
    font-size: 30rpx;
  }
}

@media (min-width: 414px) {
  .top-section {
    height: 45vh;
  }
  
  .greeting {
    font-size: 52rpx;
  }
  
  .welcome-message {
    font-size: 36rpx;
  }
  
  .illustration {
    width: 220rpx;
    height: 220rpx;
  }
}
</style>
